<script setup lang="ts">
  const props = defineProps({
    songName: String,
    artistName: String,
    area: String
  })


</script>

<template>
  <li><span v-html="songName + ' - ' + artistName"></span></li>
</template>

<style scoped lang="scss">
 li{
   display: flex;
   justify-content: space-between;
   align-items: center;
   list-style: none;
   height: 30px;
   padding: 2px 5px;
   border-radius: 2px;
   margin: 0;
   width: 100%;

   &:hover{
     background-color: var(--color-bg-hover);

   }

 }
</style>